<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import {ref} from "vue";
import img from '@/assets/img/static/fnpt_mxzs.png'

const activeKey = ref(0)

const handleSidebarClick = ( key ) => {
  console.log( key );
  activeKey.value=key
}

</script>

<template>
  <Header></Header>
  <div class="details">
    <div>
      <img :src="img">
    </div>
    <div class="page-layout">
      <Sidebar @sidebar-click="handleSidebarClick">
        <template #title>
          <span>模型中枢</span>
        </template>
      </Sidebar>
      <div class="main-content">
        <!-- 首页内容 -->
        <div class="content-section" :class="activeKey===0 && 'active'" id="home">
          <h2 class="page-title">模型中枢</h2>
          <p class="page-subtitle">汇聚优质AI模型资源，提供一站式模型开发、部署和应用服务</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型中枢" class="intro-image">

          <div class="content-text">
            <p>模型中枢是创新服务平台的核心AI模型资源库，集成了机器学习、深度学习和传统算法模型，为企业和开发者提供模型开发、训练、部署和应用的全流程支持。</p>
            <p>中枢汇聚了超过1000个预训练模型，覆盖计算机视觉、自然语言处理、语音识别、推荐系统等多个领域。我们的模型库持续更新，包含来自学术界和产业界的最新研究成果。</p>
            <p>模型中枢提供从模型选择、微调训练到服务部署的一站式解决方案，大幅降低AI技术应用门槛，加速企业智能化转型。</p>
          </div>

          <h3>精选模型</h3>
          <div class="model-grid">
            <div class="model-card">
              <h3>图像分类模型</h3>
              <p>ResNet、EfficientNet等经典图像分类模型，支持迁移学习和自定义分类任务。</p>
              <span class="model-tag">计算机视觉</span>
              <span class="model-tag">预训练模型</span>
            </div>

            <div class="model-card">
              <h3>目标检测模型</h3>
              <p>YOLO、Faster R-CNN等目标检测模型，支持多种场景下的物体识别和定位。</p>
              <span class="model-tag">计算机视觉</span>
              <span class="model-tag">实时检测</span>
            </div>

            <div class="model-card">
              <h3>文本分类模型</h3>
              <p>BERT、RoBERTa等预训练语言模型，支持文本分类、情感分析等任务。</p>
              <span class="model-tag">自然语言处理</span>
              <span class="model-tag">Transformer</span>
            </div>

            <div class="model-card">
              <h3>语音识别模型</h3>
              <p>DeepSpeech、Wav2Vec等语音识别模型，支持多语种语音转文字。</p>
              <span class="model-tag">语音处理</span>
              <span class="model-tag">端到端模型</span>
            </div>

            <div class="model-card">
              <h3>推荐系统模型</h3>
              <p>Wide &amp; Deep、DeepFM等推荐算法，支持个性化推荐和广告投放。</p>
              <span class="model-tag">推荐系统</span>
              <span class="model-tag">CTR预测</span>
            </div>

            <div class="model-card">
              <h3>时间序列预测</h3>
              <p>Prophet、LSTM等时间序列模型，支持销售预测、设备预警等场景。</p>
              <span class="model-tag">预测分析</span>
              <span class="model-tag">时序数据</span>
            </div>
          </div>
        </div>

        <!-- 建设概况内容 -->
        <div class="content-section" :class="activeKey===1 && 'active'" id="construction">
          <h2 class="page-title">建设概况</h2>
          <p class="page-subtitle">模型中枢的发展历程与技术架构</p>

          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型中枢建设" class="intro-image">

          <div class="content-text">
            <p>模型中枢于2023年启动建设，总投资2亿元人民币，是区域首个专注于AI模型资源共享和服务的公共平台。</p>
            <p>中枢建设分为三个阶段：一期工程（2023年）完成了基础平台搭建和核心模型库建设；二期工程（2024年）实现了模型训练和部署的自动化流程；三期工程（2025年）将重点打造行业专用模型和联邦学习能力。</p>
            <p>目前，模型中枢已整合了来自50多个开源项目和30多家企业的模型资源，服务用户超过5000家，日均模型调用量超过10万次。</p>
          </div>

          <h3>技术架构</h3>
          <div class="architecture">
            <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型中枢技术架构">
          </div>

          <div class="tech-stack">
            <div class="tech-item">
              <div class="tech-icon">🧠</div>
              <h4>模型仓库</h4>
              <p>集中管理各类AI模型，支持版本控制和元数据管理</p>
            </div>

            <div class="tech-item">
              <div class="tech-icon">⚙️</div>
              <h4>训练平台</h4>
              <p>提供分布式训练环境，支持主流深度学习框架</p>
            </div>

            <div class="tech-item">
              <div class="tech-icon">🚀</div>
              <h4>推理服务</h4>
              <p>高性能模型推理引擎，支持多种部署方式</p>
            </div>

            <div class="tech-item">
              <div class="tech-icon">📊</div>
              <h4>监控系统</h4>
              <p>实时监控模型性能和数据质量</p>
            </div>

            <div class="tech-item">
              <div class="tech-icon">🔄</div>
              <h4>持续集成</h4>
              <p>自动化模型训练、测试和部署流程</p>
            </div>

            <div class="tech-item">
              <div class="tech-icon">🔒</div>
              <h4>安全机制</h4>
              <p>模型加密和访问控制，保障模型安全</p>
            </div>
          </div>
        </div>

        <!-- 政策资讯内容 -->
        <div class="content-section" :class="activeKey===2 && 'active'" id="policy">
          <h2 class="page-title">政策资讯</h2>
          <p class="page-subtitle">关于模型中枢的相关政策和支持措施</p>

          <div class="policy-list">
            <div class="policy-item">
              <h3>《关于促进AI模型资源共享的指导意见》</h3>
              <p>发布部门：市科技局、市工信局 | 发布时间：2025年3月10日</p>
              <p>该意见提出了加强模型资源整合、推动模型共享应用、培育模型服务产业等6个方面的政策措施。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《模型中枢企业使用补贴办法》</h3>
              <p>发布部门：市工信局 | 发布时间：2025年4月18日</p>
              <p>办法明确了企业使用模型中枢资源的补贴标准和申请流程，最高可获60%的费用补贴。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>

            <div class="policy-item">
              <h3>《AI模型知识产权保护指引》</h3>
              <p>发布部门：市知识产权局 | 发布时间：2025年5月5日</p>
              <p>指引明确了AI模型的知识产权归属、使用授权和侵权处理机制，保障模型开发者和使用者的合法权益。</p>
              <a href="javascript:;">查看政策全文 →</a>
            </div>
          </div>
        </div>

        <!-- 活动报道内容 -->
        <div class="content-section" :class="activeKey===3 && 'active'" id="activity">
          <h2 class="page-title">活动报道</h2>
          <p class="page-subtitle">模型中枢相关活动与新闻报道</p>

          <div class="news-list">
            <div class="news-item">
              <div class="news-date">2025-06-20</div>
              <div class="news-content">
                <h3><a href="javascript:;">模型中枢与5家人工智能企业签署战略合作协议</a></h3>
                <p>模型中枢与本地5家AI领先企业签署合作协议，共同推进AI模型研发和应用落地。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-05-15</div>
              <div class="news-content">
                <h3><a href="javascript:;">模型中枢二期平台正式上线</a></h3>
                <p>模型中枢二期平台完成升级，新增自动化模型训练和联邦学习功能，服务能力大幅提升。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-04-08</div>
              <div class="news-content">
                <h3><a href="javascript:;">模型中枢荣获"最佳AI服务平台"奖</a></h3>
                <p>在2025全球人工智能大会上，模型中枢荣获"最佳AI服务平台"奖项。</p>
              </div>
            </div>

            <div class="news-item">
              <div class="news-date">2025-03-01</div>
              <div class="news-content">
                <h3><a href="javascript:;">模型中枢模型数量突破1000个</a></h3>
                <p>模型中枢汇聚的AI模型数量突破1000个，覆盖20多个应用场景。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 服务介绍内容 -->
        <div class="content-section" :class="activeKey===4 && 'active'" id="service">
          <h2 class="page-title">服务介绍</h2>
          <p class="page-subtitle">模型中枢提供的各类模型服务</p>

          <div class="service-list">
            <div class="service-item">
              <h3>模型开发服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型开发" class="service-image">
                <div class="service-text">
                  <p>提供从数据准备、特征工程到模型训练的全流程开发环境。支持主流深度学习框架，提供丰富的预训练模型和开发工具，大幅提升模型开发效率。</p>
                  <p>服务特点：可视化开发界面、自动化特征工程、分布式训练支持</p>
                  <p>适用场景：定制化模型开发、算法研究、POC验证等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>模型训练服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型训练" class="service-image">
                <div class="service-text">
                  <p>提供强大的计算资源支持模型训练，支持自动化超参数优化和模型调优。我们的训练平台可以高效利用GPU/TPU资源，加速模型收敛。</p>
                  <p>服务特点：弹性计算资源、自动调参、训练监控</p>
                  <p>适用场景：大规模模型训练、模型微调、对比实验等</p>
                </div>
              </div>
            </div>

            <div class="service-item">
              <h3>模型部署服务</h3>
              <div class="service-content">
                <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="模型部署" class="service-image">
                <div class="service-text">
                  <p>提供灵活的模型部署方案，支持云端API、边缘设备和私有化部署。我们的推理引擎经过深度优化，能够实现高并发、低延迟的模型服务。</p>
                  <p>服务特点：多种部署方式、自动扩缩容、性能监控</p>
                  <p>适用场景：在线推理服务、边缘计算、企业级应用等</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-layout{
  display: flex;
  margin-top: 20px;
}
.main-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.page-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.intro-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.content-text {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.model-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.model-card h3 {
  font-size: 18px;
  color: #1e5799;
  margin-bottom: 10px;
}

.model-card p {
  font-size: 14px;
  color: #666;
}

.model-tag {
  display: inline-block;
  background-color: #e0e9ff;
  color: #1e5799;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 5px;
  margin-top: 10px;
}

.news-list {
  margin-top: 30px;
}

.news-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e0e9ff;
}

.news-date {
  width: 100px;
  color: #207cca;
  font-weight: bold;
}

.news-content {
  flex: 1;
}

.news-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.news-content p {
  color: #666;
  font-size: 14px;
}

.news-content a {
  color: #1e5799;
  text-decoration: none;
}

.news-content a:hover {
  text-decoration: underline;
}

.service-list {
  margin-top: 30px;
}

.service-item {
  margin-bottom: 30px;
}

.service-item h3 {
  font-size: 20px;
  color: #1e5799;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.service-content {
  display: flex;
  margin-bottom: 20px;
}

.service-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.service-text {
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

.policy-list {
  margin-top: 30px;
}

.policy-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fbff;
  border-radius: 8px;
  border-left: 4px solid #207cca;
}

.policy-item h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.policy-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.policy-item a {
  color: #207cca;
  text-decoration: none;
  font-size: 14px;
}

.architecture {
  text-align: center;
  margin: 40px 0;
}

.architecture img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.tech-item {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
  border: 1px solid #e0e9ff;
}

.tech-item:hover {
  transform: translateY(-5px);
  background-color: white;
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.1);
}

.tech-icon {
  font-size: 36px;
  color: #207cca;
  margin-bottom: 15px;
}

.tech-item h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.tech-item p {
  color: #666;
  font-size: 14px;
}
</style>